<template>
  <div class="box">
      <div class="box-next" v-for="pubu in pubus" :key="pubu.id" @click="pubuliu(pubu.id)">
            <img :src="pubu.goodsImg">
            <p class="next-txt">{{pubu.goodsName}}</p>
            <p class="xinpin">新品</p>
            <div class="next-bottom">
                <span class="bot-sp1">￥<span class="bot-sp2">{{pubu.goodsLowPrice}}</span></span>
                <del class="bot-de1">￥<del class="bot-de2">{{pubu.goodsHighPrice}}</del></del>
                <span class="iconfont icon-jia"></span>
            </div>
      </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
    name:"Pubuliu",
    data(){
        return {
            pubus:[]
        }
    },
    methods:{
        pubuliu(xiaoid){
            this.$router.push("Details"+xiaoid)
        }
    },
    created(){
        axios({
            url:"/api/goods/findGoodsByType/",
            params:{
                typeId:8
            }
        })
        .then(res=>{
            console.log("res.data.data",res.data.data);
            this.pubus = res.data.data
        })

    }
}
</script>

<style scoped>
@import url("../assets/font-footer/iconfont.css");
    .box{
        width: 3.4rem;
        margin: auto;
        column-count: 2;
        column-gap: 0.1rem;
    }
    .box .box-next{
        width: 1.65rem;
    }
    .box-next img{
        width: 1.65rem;
    }
    .box-next .next-txt{
        width: 1.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.14rem;
        margin: 0.12rem 0 0.06rem 0.08rem;
    }
    .box-next .xinpin{
        width: 0.2rem;
        height: 0.14rem;
        border: 0.02rem solid #dfd3d6;
        font-size: 0.1rem;
        line-height: 0.14rem;
        text-align: center;
        color: #ef7f69;
        border-radius: 0.02rem;
        margin-left: 0.08rem;
    }
    .box-next .next-bottom{
        width: 1.65rem;
        height: 0.36rem;
    }
    .next-bottom .bot-sp1{
        font-size: 0.09rem;
        color: #fe4907;
        margin-left: 0.08rem;
        margin-top: 0.08rem;
        float: left;
    }
    .next-bottom .bot-sp1 .bot-sp2{
        font-size: 0.12rem;
    }
    .next-bottom .bot-de1{
        font-size: 0.1rem;
        color: #999999;
        text-decoration: line-through;
        float: left;
        margin: 0.08rem 0 0 0.05rem;
    }
    .next-bottom>.iconfont{
        font-size: 0.22rem;
        color: #222686;
        float: right;
        margin: 0.08rem 0.1rem 0 0;
    }
</style>